<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>商品管理页面</title>
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
</head>
<style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
<body class="layui-layout-body">
  <div class="layui-inline">
     <input name="keyWord" id="keyWord" class="layui-input" autocomplete="off" placeholder="请输入关键字">
  </div>
  <select name="keyType" id="key_type" lay-verify="" class="layui-inline" style="height:37.5px;">
    <option value="110" selected>商品名称</option>
    <option value="111">货号</option>
    <option value="112">品名</option>
  </select> 
  <button class="layui-btn" data-type="reload">搜索</button>

  <table class="layui-hide" id="demo" lay-filter="test"></table>
  
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
 
  <div class="layui-tab layui-tab-brief" lay-filter="demo">
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div class="layui-carousel" id="test1">
          <div carousel-item>
            <div><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
            <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
            <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
            <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
            <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
<script>
layui.config({
  version: '1568076536616' //为了更新 js 缓存，可忽略
});

//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});

layui.use(['laypage', 'table','carousel','element'],function(){
  var laypage = layui.laypage //分页 
      ,table = layui.table //表格
      ,carousel = layui.carousel //轮播
      ,element = layui.element //元素操作
      
  
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 400
    ,url: '../../admin/selectCommodityList' //数据接口
    ,method: 'post'
    ,limit: '10'
    ,title: '商品表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: false //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'imgSrc', title: '图片路径', width:125}
      ,{field: 'commodityName', title: '商品名称', width:150,totalRow: true}
      ,{field: 'commodityClass', title: '商品类别', width:90,}
      ,{field: 'commodityMs', title: '商品描述', width:100,}
      ,{field: 'commodityGoodsNo', title: '货号', width:90,totalRow: true}
      ,{field: 'commodityMarketPrice', title: '市场价', width:90} 
      ,{field: 'commoditySellPrice', title: '销售价', width: 120}
      ,{field: 'commodityStockNum', title: '库存', width: 120}
      ,{field: 'productName', title: '品名', width: 120}
      ,{field: 'productColor', title: '颜色', width: 120}
      ,{field: 'productWeight', title: '重量', width: 120}
      ,{field: 'productSize', title: '尺寸', width: 150}
      ,{field: 'zxsj', title: '造型设计', width: 150}
      ,{field: 'zlbz', title: '质量保证', width: 150}
      ,{field: 'gzwd', title: '工作温度', width: 150}
      ,{field: 'bcwd', title: '保持温度', width: 150}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        AddUv();
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          EidtOne(checkStatus,obj);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
        	layer.confirm('真的删除行么', function(index){
          	  $.ajax({
                    url: "../../admin/deleteCommodityById",
                    type: "post",
                    data: JSON.stringify({"id":checkStatus.data[0].id}),
                    contentType: "application/json;charset=UTF-8",
                    datatype: "json",
                    success:function(data){
                  	  if(data.id==1){
                  	      layer.msg("删除成功",{icon:6},function(){
                  	  	  setTimeout('window.location.reload()',1);
                  	  });
                        }else{
                      	  layer.msg("删除失败",{icon:5});  
                        }
                    }
                });
            });
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('ID:'+data.id+"&nbsp;&nbsp;&nbsp;图片路径:"+data.imgSrc+"&nbsp;&nbsp;&nbsp;商品名称:"+data.commodityName+"&nbsp;&nbsp;&nbsp;商品类别:"+data.commodityClass+"&nbsp;&nbsp;&nbsp;商品描述:"+data.commodityMs+"&nbsp;&nbsp;&nbsp;货号:"+data.commodityGoodsNo+"&nbsp;&nbsp;&nbsp;市场价:"+data.commodityMarketPrice+"&nbsp;&nbsp;&nbsp;销售价:"+data.commoditySellPrice+"&nbsp;&nbsp;&nbsp;库存:"+data.commodityStockNum+"&nbsp;&nbsp;&nbsp;品名:"+data.productName+"&nbsp;&nbsp;&nbsp;颜色:"+data.productColor+"&nbsp;&nbsp;&nbsp;重量:"+data.productWeight+"&nbsp;&nbsp;&nbsp;尺寸:"+data.productSize+"&nbsp;&nbsp;&nbsp;造型设计:"+data.zxsj+"&nbsp;&nbsp;&nbsp;质量保证:"+data.zlbz+"&nbsp;&nbsp;&nbsp;工作温度:"+data.gzwd+"&nbsp;&nbsp;&nbsp;保存温度:"+data.bcwd);
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
    	  $.ajax({
              url: "../../admin/deleteCommodityById",
              type: "post",
              data: JSON.stringify({"id":data.id}),
              contentType: "application/json;charset=UTF-8",
              dataType: "json",
              success:function(data){
            	  if(data.id==1){
            		  obj.del(); //删除对应行（tr）的DOM结构
                      layer.close(index);//向服务端发送删除指令 
            	      layer.msg("删除成功",{icon:6});
                  }else{
                	  layer.msg("删除失败",{icon:5});  
                  }
              }
          });
      });
    } else if(layEvent === 'edit'){
    	EidtTwo(data,obj);
    }
  });
  
  //获取搜索框和下拉框内容并重载
  $('.layui-btn').on('click', function(){
	  var keyWord=$("#keyWord").val();
      var keyType=$("#key_type option:selected").val();
      table.reload('demo',{
          method:'post',
          where:{keyWord:keyWord,keyType:keyType}
      });
  });
  
  //表单提交添加数据
  function  AddUv(){
	   layer.open({
	   title:['上架商品','text-align: center'],
	   type:1,
	   area:['380px','400px'],
	   content:$("#form1")
	   }); 
  };
  
  //获取表单信息编辑操作一
  function  EidtOne(checkStatus,obj) {
	    $("#id").val(checkStatus.data[0].id);
	    $("#imgSrc").val(checkStatus.data[0].imgSrc);
	    $("#commodityName").val(checkStatus.data[0].commodityName);
	    $("#commodityClass").val(checkStatus.data[0].commodityClass);
	    $("#commodityMs").val(checkStatus.data[0].commodityMs);
	    $("#commodityGoodsNo").val(checkStatus.data[0].commodityGoodsNo);
	    $("#commodityMarketPrice").val(checkStatus.data[0].commodityMarketPrice);
	    $("#commoditySellPrice").val(checkStatus.data[0].commoditySellPrice);
	    $("#commodityStockNum").val(checkStatus.data[0].commodityStockNum);
	    $("#productName").val(checkStatus.data[0].productName);
	    $("#productColor").val(checkStatus.data[0].productColor);
	    $("#productWeight").val(checkStatus.data[0].productWeight);
	    $("#productSize").val(checkStatus.data[0].productSize);
	    $("#zxsj").val(checkStatus.data[0].zxsj);
	    $("#zlbz").val(checkStatus.data[0].zlbz);
	    $("#gzwd").val(checkStatus.data[0].gzwd);
	    $("#bcwd").val(checkStatus.data[0].bcwd);
	        layer.open({
	        title:['修改商品信息','text-align: center'],
	        type:1,
	        area:['380px','400px'],
	        content:$("#form2")
	    });
  };
  
  //获取表单信息编辑操作二
  function  EidtTwo(data,obj) {
	    $("#id").val(data.id);
	    $("#imgSrc").val(data.imgSrc);
	    $("#commodityName").val(data.commodityName);
	    $("#commodityClass").val(data.commodityClass);
	    $("#commodityMs").val(data.commodityMs);
	    $("#commodityGoodsNo").val(data.commodityGoodsNo);
	    $("#commodityMarketPrice").val(data.commodityMarketPrice);
	    $("#commoditySellPrice").val(data.commoditySellPrice);
	    $("#commodityStockNum").val(data.commodityStockNum);
	    $("#productName").val(data.productName);
	    $("#productColor").val(data.productColor);
	    $("#productWeight").val(data.productWeight);
	    $("#productSize").val(data.productSize);
	    $("#zxsj").val(data.zxsj);
	    $("#zlbz").val(data.zlbz);
	    $("#gzwd").val(data.gzwd);
	    $("#bcwd").val(data.bcwd);
	        layer.open({
	        title:['修改用户信息','text-align: center'],
	        type:1,
	        area:['380px','400px'],
	        content:$("#form2")
	    });
  };
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  
  
  //底部信息
  var footerTpl = lay('#footer')[0].innerHTML;
  lay('#footer').html(layui.laytpl(footerTpl).render({}))
  .removeClass('layui-hide');
  });

</script>


<!-- 添加数据的弹框-->
<form class="layui-form layui-form-pane1" id="form1" name="form1" style="display: none;" action="../../admin/addCommodity" method="post" lay-filter="first1">  
    <div class="layui-form-item">
        <label class="layui-form-label">图片路径</label>
        <div class="layui-input-inline">
            <input type="tel" name="imgSrc" lay-verify="required" required placeholder="请输入图片路径"  autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityName" lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityClass" lay-verify="required" placeholder="请输入商品类别" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityMs" lay-verify="required|" required placeholder="请输入商品描述" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">货号</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityGoodsNo" lay-verify="required|" placeholder="请输入货号" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">市场价</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityMarketPrice" lay-verify="required|" placeholder="请输入市场价" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">销售价</label>
        <div class="layui-input-inline">
            <input type="tel" name="commoditySellPrice" lay-verify="required|" placeholder="请输入销售价" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityStockNum" lay-verify="required|" placeholder="请输入库存数" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">品名</label>
        <div class="layui-input-inline">
            <input type="tel" name="productName" lay-verify="required|" placeholder="请输入品名" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">颜色</label>
        <div class="layui-input-inline">
            <input type="tel" name="productColor" lay-verify="required|" placeholder="请输入商品颜色" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">重量</label>
        <div class="layui-input-inline">
            <input type="tel" name="productWeight" lay-verify="required|" placeholder="请输入商品重量" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">尺寸</label>
        <div class="layui-input-inline">
            <input type="tel" name="productSize" lay-verify="required|" placeholder="请输入商品尺寸" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">造型设计</label>
        <div class="layui-input-inline">
            <input type="tel" name="zxsj" lay-verify="required|" placeholder="请输入造型设计" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">质量保证</label>
        <div class="layui-input-inline">
            <input type="tel" name="zlbz" lay-verify="required|" placeholder="请输入质量保证" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">工作温度</label>
        <div class="layui-input-inline">
            <input type="tel" name="gzwd" lay-verify="required|" placeholder="请输入工作温度" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">保存温度</label>
        <div class="layui-input-inline">
            <input type="tel" name="bcwd" lay-verify="required|" placeholder="请输入保存温度" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 修改的弹框 -->
<form class="layui-form layui-form-pane1" id="form2" name="form2" style="display: none;" action="../../admin/updateCommodityById" method="post" lay-filter="first1">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">id</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="id" lay-verify="required|" required placeholder="请输入id" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">图片路径</label>
        <div class="layui-input-inline">
            <input type="tel" name="imgSrc" id="imgSrc" lay-verify="required" required placeholder="请输入图片路径"  autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityName" id="commodityName" lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityClass" id="commodityClass" lay-verify="required" placeholder="请输入商品类别" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityMs" id="commodityMs" lay-verify="required|" required placeholder="请输入商品描述" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">货号</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityGoodsNo" id="commodityGoodsNo" lay-verify="required|" placeholder="请输入货号" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">市场价</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityMarketPrice" id="commodityMarketPrice" lay-verify="required|" placeholder="请输入市场价" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">销售价</label>
        <div class="layui-input-inline">
            <input type="tel" name="commoditySellPrice" id="commoditySellPrice" lay-verify="required|" placeholder="请输入销售价" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="tel" name="commodityStockNum" id="commodityStockNum" lay-verify="required|" placeholder="请输入库存数" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">品名</label>
        <div class="layui-input-inline">
            <input type="tel" name="productName" id="productName" lay-verify="required|" placeholder="请输入品名" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">颜色</label>
        <div class="layui-input-inline">
            <input type="tel" name="productColor" id="productColor" lay-verify="required|" placeholder="请输入商品颜色" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">重量</label>
        <div class="layui-input-inline">
            <input type="tel" name="productWeight" id="productWeight" lay-verify="required|" placeholder="请输入商品重量" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">尺寸</label>
        <div class="layui-input-inline">
            <input type="tel" name="productSize" id="productSize" lay-verify="required|" placeholder="请输入商品尺寸" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">造型设计</label>
        <div class="layui-input-inline">
            <input type="tel" name="zxsj" id="zxsj" lay-verify="required|" placeholder="请输入造型设计" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">质量保证</label>
        <div class="layui-input-inline">
            <input type="tel" name="zlbz" id="zlbz" lay-verify="required|" placeholder="请输入质量保证" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">工作温度</label>
        <div class="layui-input-inline">
            <input type="tel" name="gzwd" id="gzwd" lay-verify="required|" placeholder="请输入工作温度" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">保存温度</label>
        <div class="layui-input-inline">
            <input type="tel" name="bcwd" id="bcwd" lay-verify="required|" placeholder="请输入保存温度" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">修改</button>
        </div>
    </div>
</form>  
</body>
</html>